<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>国家分布图</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-alpha.1/echarts.common.js"></script>
    <script>
function sumbit() {
    var myChart = echarts.init(document.getElementById('bar1'));
    $.ajax({
        type : "post",
        url : "enchart",
        async : true,
        success : function(data) {
            option ={
                title : {
                    text : '国家分布图'
                },
                tooltip : {},
                legend : {
                    data : [ '国家人数' ]
                },
                xAxis : {
                    data : data.country
                },
                yAxis : {},
                series : [ {
                    name : '国家人数',
                    type : 'bar',
                    data : data.num
        }]
        };
            myChart.setOption(option);
        }
    })
}

    </script>
</head>

<body>

<div id="bar1" style="width: 600px; height: 450px;"></div>

<button type="button" onclick="sumbit()">提交</button>

</body>
</html>
